<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.content{
			width: 1000px;
			margin: 0 auto;
			font-size: 0;
		}
		.content div{
			width: 250px;
			height: 250px;
			background-color: red;
			font-size: 18px;
			display: inline-block;
			border: 1px solid black;
			padding: 10px;
			box-sizing: border-box;
/*			转换为IE盒模型*/
			}

	</style>
</head>
<body>
<!-- wdith+padding+border+margin ===盒模型 ===实际所占空间 -->
<!-- 实际容器大小 -->
<!-- 我们设置的宽高不包含内边距和边框  这种盒模型结构  我们称之为标准和模型 -->

<!-- IE盒模型（怪异盒模型） -->
<!-- 设置的宽高包含内边距和边框 -->
<!-- box-sizsing:border-box  变为IE 盒模型 -->



<div class="content">
	<div>11</div>
	<div>22</div>
	<div>33</div>
	<div>44</div>
</div>



</body>
</html>